<template>
  <div class="beiMei">
    <div class="nav">
      <div class="place">
        <p class="hotPlace"><span>热门目的地</span><span>8个</span></p>
        <ul class="placeUl">
          <li><a href="#">洛杉矶</a></li>
          <li><a href="#">纽约</a></li>
        </ul>
        <ul class="placeUl">
          <li><a href="#">多伦多</a></li>
          <li><a href="#">温哥华</a></li>
        </ul>
        <ul class="placeUl">
          <li><a href="#">拉斯维加斯</a></li>
          <li><a href="#">旧金山</a></li>
        </ul>
        <ul class="placeUl">
          <li><a href="#">塞班岛</a></li>
          <li><a href="#">波士顿</a></li>
        </ul>
      </div>
      <div class="place">
        <p class="hotPlace"><span>全部国家</span><span>27个</span></p>
        <ul class="placeUl">
          <li><a href="#">美国</a></li>
          <li><a href="#">加拿大</a></li>
        </ul>
        <ul class="placeUl">
          <li><a href="#">墨西哥</a></li>
          <li><a href="#">古巴</a></li>
        </ul>
        <ul class="placeUl">
          <li><a href="#">危地马拉</a></li>
          <li><a href="#">哥斯达黎加</a></li>
        </ul>
        <ul class="placeUl">
          <li><a href="#">牙买加</a></li>
          <li><a href="#">米多尼克</a></li>
        </ul>
        <ul class="placeUl">
          <li><a href="#">巴拿马</a></li>
          <li><a href="#">洪都拉斯</a></li>
        </ul>
        <ul class="placeUl">
          <li><a href="#">海地</a></li>
          <li><a href="#">伯利兹</a></li>
        </ul>
        <ul class="placeUl">
          <li><a href="#">多米尼加</a></li>
          <li><a href="#">尼加拉瓜</a></li>
        </ul>
        <ul class="placeUl">
          <li><a href="#">巴哈马</a></li>
          <li><a href="#">巴巴多斯</a></li>
        </ul>
        <ul class="placeUl">
          <li><a href="#">格林纳达</a></li>
          <li><a href="#">萨尔瓦多</a></li>
        </ul>
        <ul class="placeUl">
          <li><a href="#">美属萨摩卡</a></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "beiMeiZhou"
    }
</script>

<style scoped>
  .nav{
    background:white;
    margin-left:1.07rem;
  }
  .hotPlace{
    display: flex;
    line-height:.51rem;

  }
  .hotPlace span:first-child{
    font-size:.15rem;
  }
  .hotPlace span:last-child{
    font-size:.13rem;
    color:#8a8a8a;
    margin-left:.05rem;
  }
  .placeUl{
    display: flex;
    font-size:.14rem;
  }
  .placeUl li{
    width:1.2rem;
    height:.36rem;
    color:#101010;
    text-align:center;
    margin-right:.08rem;
    margin-bottom:.08rem;
    line-height:.36rem;
    border:1px solid #ebebeb;
    border-radius: 5px;
  }
  .placeUl li span{
    font-size:.11rem;
    color:#ababab;
    margin-left:.05rem;
  }
</style>
